import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useNavigate,
  useSearchParams,
  useParams
} from 'react-router-dom'

function Home() {
  const navigate = useNavigate()
  return (
    <div>
      <h2>首页</h2>
      <button onClick={() => navigate('/about/1001', { replace: true })}>go about</button>
    </div>
  )
}

function About() {
  // const [params, setParams] = useSearchParams()
  // console.log(params.get('id'));

  const params = useParams() // 拿到动态路由的参数，返回的是一个对象，key是路由的名字，value是路由的值
  console.log(params); // {id: '1001'} 拿到的是一个对象，key是路由的名字，value是路由的值


  return (
    <div>
      <h2>关于 -- {params.id}</h2>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      {/* 路由配置区域 */}
      <BrowserRouter>
        <Link to='/'>首页</Link>
        <Link to='/about'>关于</Link>

        {/* 路由出口 */}
        <Routes>
          <Route path='/' element={<Home></Home>}></Route>
          <Route path='/about/:id' element={<About></About>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;